<!DOCTYPE HTML>
<html>
<head>
<title>Category: {{categoryName}}</title>
<link rel="stylesheet" href={{ url_for('static', filename='css/home.css') }} />
<link rel="stylesheet" href={{ url_for('static', filename='css/topStyle.css') }} />
</head>
<body>
<div id="title">
	<a href="/">
		<img id="logo" src= {{ url_for('static', filename='images/logo.png') }} />
	</a>
	<form>
		<input id="searchBox" type="text" name="searchQuery">
		<input id="searchButton" type="submit" value="Search">
	</form>

	{% if not loggedIn %}
	<div id="signInButton">
		<a class="link" href="/loginForm">Sign In</a>
	</div>
	{% else %}
	<div class="dropdown">
		<button class="dropbtn">Hello, <br>{{firstName}}</button>
		<div class="dropdown-content">
			<a href="/account/orders">Your orders</a>
			<a href="/account/profile">Your profile</a>
			<hr>
			<a href="/logout">Sign Out</a>
		</div>
	</div>
	{% endif %}
	<div id="kart">
		<a class="link" href="/cart">
			<img src={{url_for('static', filename='images/shoppingCart.png')}} id="cartIcon" />
			CART {{noOfItems}}
		</a>
	</div>
</div>

<div>
	<h2>Showing all products of Category {{categoryName}}:</h2>
	{% for itemData in data %}
	<table>
		<tr id="productName">
			{% for row in itemData %}
			<td>
				{{row[1]}}
			</td>
			{% endfor %}
		</tr>
		<tr id="productImage">
			{% for row in itemData %}
			<td>
				<a href="/productDescription?productId={{row[0]}}">
					<img src={{ url_for('static', filename='uploads/' + row[3]) }} id="itemImage" />
				</a>
			</td>
			{% endfor %}
		</tr>
		<tr id="productPrice">
			{% for row in itemData %}
			<td>
				${{row[2]}}
			</td>
			{% endfor %}
		</tr>
	</table>
	{% endfor %}
</div>
</body>
</html>
